<template>
    <div id="bigDiv">
        <head-2 />
        <div id="bigTitle">数字炸弹</div>
        <div id="contentDiv">
            <p id="timu"><span id="realti">找出能被2整除的数</span><span>&nbsp;&nbsp;&nbsp;&nbsp;倒计时：</span><span id="jishi">15</span></p>
		<div id="waiBu">
		</div>
        </div>
		<div id="GameOver" v-if="isEnd">
            <div id="endTittle">游戏结束</div>
            <div>
                <img src="https://pic2.imgdb.cn/item/644a7a5e0d2dde5777f7ad9f.jpg" alt="" />
                <p>{{ res }}</p>
            </div>
            <div id="btn">
                <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
                <el-button type="success" size="small" @click="goBack">返回首页</el-button>
                <el-button type="success" size="small" @click="lookEnd">查看结果</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import head2 from '@/components/Head/head2.vue'
export default {
    components: { head2 },
    data() {
        return {
            countDwon: 10,
			isEnd:false,
        }
    },
    mounted() {
        //   this.contDwon()
        this.getBoom()
    },
    methods: {
		onceAgain(){
            this.isEnd=!this.isEnd
			let tiMuALL=document.getElementById("waiBu");//获取随机题目外部大边框
			tiMuALL.innerHTML=""
			this.getBoom()
        },
        goBack(){
            this.$router.push("/home")
        },
        lookEnd(){
            this.isEnd=!this.isEnd
        },
        getBoom(){
			const content=this
            let tiMuALL=document.getElementById("waiBu");//获取随机题目外部大边框
			let randomArr=[];//统计每一个数字
			let j=0//随机数的起始数
			let jishiqi=document.getElementById("jishi");//获取计时器
			let n=15;//定义倒计时
			let randomTiMu=Math.floor(Math.random()*8)+2;//随机获取除数
			let chuti=document.getElementById("realti");//定义能被几整除
			let allTiMu=document.getElementsByClassName("content")//获取每个题目内容
			let jieguo=document.getElementById("show")//获取结束窗口
			let kong=[];
			let kongNumber=0;
			chuti.innerText="找出能被"+randomTiMu+"整除的数"
			while(j!=12){//防止随机数重复
				let rodomNumber=Math.floor(Math.random()*100);
				if(randomArr.indexOf(rodomNumber)==-1){
					randomArr.push(rodomNumber)
					j++
				}
			}
			for(let i=0;i<12;i++){//循环为数组每一个选项赋值
				let newdiv=document.createElement("div");
				newdiv.alt=i
				newdiv.className="content"
				newdiv.innerText=randomArr[i]
				newdiv.style.color="white"
				tiMuALL.appendChild(newdiv)
			}
			
			Array.from(allTiMu).forEach(el=>{
				el.onclick=function(){
					if(this.innerHTML%randomTiMu==0){
						this.style.backgroundColor="green";
						kong.push(1111)
					}
					else{
						this.style.backgroundColor="red";
						content.isEnd=!content.isEnd
						clearInterval(timer)
					}
				}
			})
			var timer=setInterval(function(){
				n--;
				jishiqi.innerHTML=n;
				if(n==0){
					clearInterval(timer)
					Array.from(allTiMu).forEach(el=>{
						if(el.innerHTML%randomTiMu==0){
							el.style.backgroundColor="green";
							kongNumber++
						}
						else{
							el.style.backgroundColor="red";
						}
					})
					
					if(kong.length==kongNumber){
					}
					else{
						
					}
					content.isEnd=!content.isEnd
				}
			},1000)
			
        }
    }
}
</script>
  
<style lang="less">
#GameOver {
    width: 80vw;
    height: 65vh;
    background-color: rgb(218, 225, 218);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    #endTittle {
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    p {
        font-size: 18px;
        color: red;
        font-weight: bold;
        margin-bottom: 5vh;
        letter-spacing: 2px;
    }
    img {
        margin: 6vh auto 1vh;
        width: 90%;
        height: 30vh;
        object-fit: cover;
    }
    #btn {
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
    }
}
#timu{
			font-size: 20px;
			color: #171716;
			text-align: center;
			letter-spacing: 1px;
		}
		#waiBu{
			display: flex;
			flex-wrap: wrap;
			width: 95vw;
			height: 65vh;
			justify-content: space-around;
		}
		.content{
			width: 25vw;
			height: 25vw;
			font-size: 18px;
			background-color: #6B78B4;
			line-height: 25vw;
			text-align: center;
		}
		#jishi{
			color: deeppink;
		}
#bigDiv {
    height: 100vh;

    #countDown {
        font-size: 18px;
        font-weight: bold;
        margin-top: 30px;
        letter-spacing: 2px;

        #timeNumber {
            color: red;
        }
    }

    #bigTitle {
        font-weight: bold;
        font-size: 22px;
        margin-top: 5px;
        margin-bottom: 5px;
        letter-spacing: 3px;
    }

}
</style>